<template>
  <div style="width:100%;height:100%">
    <index-header />
    <div class="h-87">
      <!-- 高 636px  -->
      <div class="flex justify-between" style="height:64.67%">
        <div data-top class="second-sides">
          <div style="height:50%">1.1</div>
          <div style="height:50%">
            <v-chart :options="options" />
          </div>
        </div>
        <div data-top class="second-center">2</div>
        <div data-top class="second-sides">
          <div style="height:50%">
            <v-chart :options="annular" />
          </div>
          <div style="height:50%">
            <v-chart :options="patents" />
          </div>
        </div>
      </div>
      <!-- 高 20px -->
      <div style="height:2.14%" />
      <!-- 高 607px -->
      <div data-bottom class="flex justify-between" style="height:31.29%">
        <div data-bottom class="second-sides">
          <v-chart :options="options" />
        </div>
        <div data-bottom class="second-center">
          <div style="width:50%,height:100%">
            <v-chart :options="options" />
          </div>
          <div style="width:50%,height:100%">
            <v-chart :options="options" />
          </div>
        </div>
        <div data-bottom class="second-sides">
          <v-chart :options="options" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import YlCharts from '@/components/Charts/ylCharts.vue'
import IndexHeader from '../component/IndexHeader.vue'
export default {
  name: 'IndustrialBase',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    YlCharts,
    IndexHeader
  },
  data() {
    return {
      isShow: false,
      options: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
              position: 'inner'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '直达', selected: true },
              { value: 679, name: '营销广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#eee',
              borderColor: '#aaa',
              borderWidth: 1,
              borderRadius: 4,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 22,
                  align: 'center'
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 0.5,
                  height: 0
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            },
            data: [
              { value: 335, name: '直达' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1048, name: '百度' },
              { value: 251, name: '谷歌' },
              { value: 147, name: '必应' },
              { value: 102, name: '其他' }
            ]
          }
        ]
      }
    }
  },
  created() {},

  methods: {}
}
</script>
<style lang="scss">
.second-center {
  width: 47.87%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-sides {
  width: 25%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-center[data-top] {
  background: url(~@/assets/img/currency-box.png) no-repeat;
}
.second-center[data-bottom] {
  background: url(~@/assets/img/bottom-box.png) no-repeat;
}
.second-sides[data-top] {
  background: url(~@/assets/img/currency-box.png) no-repeat;
}
.second-sides[data-bottom] {
  background: url(~@/assets/img/bottom-box.png) no-repeat;
}
</style>
